<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            font-family: Helvetica,serif;
        }

        svg{
            width: 500px;
            height: 500px;
        }

        .top-label{
            font-size: 13px;
            font-style: italic;
            text-transform: uppercase;
            float: left;
        }

        .age-label{
            text-align: right;
            font-weight: bold;
            width: 90px;
            padding-right: 10px;
        }

        .clearfix{
            clear: both;
        }

        .bar {
            fill: #b93c9c;
        }

        .bar-label{
            text-anchor: end;
        }

        .axis-label{
            text-anchor: middle;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <h2>Age distribution of the world, 2010</h2>
    <div class="top-label age-label">
        <p>age group</p>
    </div>
    <div class="top-label">
        <p>portion of the population</p>
    </div>
    <div class="clearfix"></div>
    <svg width="500px" height="500px">
        <g transform="translate(100,30) scale(43,1)" class="bar">
            <!-- 80 and up -->
            <rect x="0" y="0" width="1.6" height="20"></rect>
            <!-- 75-79 -->
            <rect x="0" y="25" width="1.5" height="20"></rect>
            <!-- 70-74 -->
            <rect x="0" y="50" width="2.1" height="20"></rect>
            <!-- 65-69 -->
            <rect x="0" y="75" width="2.6" height="20"></rect>
            <!-- 60-64 -->
            <rect x="0" y="100" width="3.4" height="20"></rect>
            <!-- 55-59 -->
            <rect x="0" y="125" width="4.5" height="20"></rect>
            <!-- 50-54 -->
            <rect x="0" y="150" width="5.1" height="20"></rect>
            <!-- 45-49 -->
            <rect x="0" y="175" width="6.0" height="20"></rect>
            <!-- 40-44 -->
            <rect x="0" y="200" width="6.6" height="20"></rect>
            <!-- 35-39 -->
            <rect x="0" y="225" width="7.1" height="20"></rect>
            <!-- 30-34 -->
            <rect x="0" y="250" width="7.3" height="20"></rect>
            <!-- 25-29 -->
            <rect x="0" y="275" width="8.1" height="20"></rect>
            <!-- 20-24 -->
            <rect x="0" y="300" width="8.9" height="20"></rect>
            <!-- 15-19 -->
            <rect x="0" y="325" width="8.8" height="20"></rect>
            <!-- 10-14 -->
            <rect x="0" y="350" width="8.6" height="20"></rect>
            <!-- 5-9 -->
            <rect x="0" y="375" width="8.8" height="20"></rect>
            <!-- 0-4 -->
            <rect x="0" y="400" width="9.3" height="20"></rect>
        </g>

        <g class="bar-label">
            <text x="90"  y="45" >80 and up</text>
            <text x="90"  y="70" >75-79</text>
            <text x="90"  y="95" >70-74</text>
            <text x="90"  y="120" >65-69</text>
            <text x="90"  y="145" >60-64</text>
            <text x="90"  y="170" >55-59</text>
            <text x="90"  y="195" >50-54</text>
            <text x="90"  y="220" >45-49</text>
            <text x="90"  y="245" >40-44</text>
            <text x="90"  y="270" >35-39</text>
            <text x="90"  y="295" >30-34</text>
            <text x="90"  y="320" >25-29</text>
            <text x="90"  y="345" >20-24</text>
            <text x="90"  y="370" >15-19</text>
            <text x="90"  y="395" >10-14</text>
            <text x="90"  y="420" >5-9</text>
            <text x="90"  y="445" >0-4</text>
        </g>

        <g transform="translate(100,30)" stroke="black">
            <line x1="0" y1="0" x2="0" y2="-10"></line>
            <line x1="107.75" y1="0" x2="107.5" y2="-10"></line>
            <line x1="215.5" y1="0" x2="215.5" y2="-10"></line>
            <line x1="323.25" y1="0" x2="323.25" y2="-10"></line>
        </g>

        <g transform="translate(100,30)" text-anchor="middle" class="axis-label">
            <text x="0"  y="-15">0</text>
            <text x="107.75"  y="-15">2.5%</text>
            <text x="215.5"  y="-15">5.0%</text>
            <text x="323.25"  y="-15">7.5%</text>
        </g>
    </svg>
</body>
</html>